<template>
    <el-container>
        <el-header>
            <el-form :inline="true" ref="form1" :model="formInline" class="demo-form-inline" :rules="rules">
                <el-row>
                    <el-col :span="6">
                        <el-form-item  prop="mnemonicCode">
                            <el-input v-model="formInline.mnemonicCode" placeholder="请输入药品助记码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="search('form1')" icon="el-icon-view">查询药品</el-button>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" align="right">
                        <el-form-item >
                            <div class="grid-content bg-purple">
                                <el-button type="primary"  style="margin-left: 10px" icon="el-icon-edit" @click="showAddDialog">新增药品</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
        </el-header>
        <el-main>
            <el-table
                    v-loading="loading"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="blue"
                    highlight-current-row
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        type="index"
                        :index="setIndex"
                >
                </el-table-column>
                <el-table-column
                        prop="drugsCode"
                        label="药品编码"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drugsName"
                        label="药品名称"
                        width="120">
                </el-table-column>
                <el-table-column
                    prop="drugsFormat"
                    label="药品规格"
                    width="120">
                </el-table-column>
                <el-table-column
                        prop="drugsUnit"
                        label="包装单位"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="manufacturer"
                        label="生产厂家"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="drugsDosageID"
                        label="药品剂型"
                        width="80"
                        :formatter="dosageFormatter"
                >
                </el-table-column>
                <el-table-column
                        prop="drugsTypeID"
                        label="药品类型"
                        :formatter="typeFormatter"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="drugsPrice"
                        label="药品单价"
                        sortable
                        width="120">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   size="mini"
                                   @click="edit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <el-row>
            <el-col :span="8" align="left">
                <el-button type="danger" style="margin-top: 10px;width: 100px;" size="mini"
                           @click="deleteAll"  >批量删除
                </el-button>
            </el-col>
            <el-col :span="16" align="right">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="curPage"
                        :page-size="records.pageSize"
                        layout="total, prev, pager, next"
                        :total="records.total">
                </el-pagination>
            </el-col>
        </el-row>

        <!--新增药品对话框-->
        <el-dialog title="新增药品" :visible.sync="newDialogFormVisible" width="600px" >
            <el-form :model="newDrug" ref="addForm" class="demo-form-inline" :inline="true" :rules="rules2">
                <el-form-item label="药品编码" prop="drugsCode" >
                    <el-input v-model="newDrug.drugsCode" placeholder="药品编码" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品名称" prop="drugsName" >
                    <el-input v-model="newDrug.drugsName" placeholder="药品名称" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品助记码"  >
                    <el-input v-model="newDrug.mnemonicCode" placeholder="药品助记码" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品规格"  >
                    <el-input v-model="newDrug.drugsFormat" placeholder="药品规格" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品单位"  >
                    <el-input v-model="newDrug.drugsUnit" placeholder="药品单位" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品单价" prop="drugsPrice" >
                    <el-input v-model="newDrug.drugsPrice" placeholder="药品单价" size="mini">
                    </el-input>
                </el-form-item>
                <el-form-item label="药品剂型"  >
                    <el-select  placeholder="输入剂型代码" v-model="newDrug.drugsDosageID" filterable  size="mini"  >
                        <el-option v-for="item in drugDosage" :key="item.id" :label="item.constantName" :value="item.id">
                            <span style="float: left">{{ item.constantName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.constantCode }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="药品类型"  >
                    <el-select  placeholder="药品类型" v-model="newDrug.drugsTypeID" size="mini" >
                        <el-option v-for="item in drugType" :key="item.id" :label="item.constantName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="warning" @click="newDialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addNewData('addForm')" size="mini">保 存</el-button>
            </div>
        </el-dialog>

        <!--药品编辑对话框-->
        <el-dialog title="编辑药品信息" :visible.sync="dialogFormVisible">
            <el-form :model="editForm" ref="form2" :label-position="labelPosition" label-width="100px" :inline="true" :rules="rules2">
                <el-form-item label="药品名称" :label-width="formLabelWidth" prop="drugsName">
                    <el-input v-model="editForm.drugsName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="药品编码" :label-width="formLabelWidth" prop="drugsCode">
                    <el-input v-model="editForm.drugsCode" ></el-input>
                </el-form-item>
                <el-form-item label="药品规格" :label-width="formLabelWidth">
                    <el-input v-model="editForm.drugsFormat" ></el-input>
                </el-form-item>
                <el-form-item label="药品单位" :label-width="formLabelWidth">
                    <el-input v-model="editForm.drugsUnit" ></el-input>
                </el-form-item>
                <el-form-item label="药品助记码" :label-width="formLabelWidth">
                    <el-input v-model="editForm.mnemonicCode" ></el-input>
                </el-form-item>
                <el-form-item label="药品单价" :label-width="formLabelWidth" prop="drugsPrice">
                    <el-input v-model="editForm.drugsPrice" ></el-input>
                </el-form-item>
                <el-form-item label="药品剂型" :label-width="formLabelWidth">
                    <el-select v-model="editForm.drugsDosageID"  placeholder="药品剂型" >
                        <el-option v-for="(item,index) in drugDosage" :key="index"
                                   :label="item.constantName"
                                   :value="item.id"
                                   :selected="false"
                        >
                            <span style="float: left">{{ item.constantName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.constantCode }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="药品类型" :label-width="formLabelWidth">
                    <el-select v-model="editForm.drugsTypeID"  placeholder="药品剂型" >
                        <el-option v-for="(item,index) in drugType" :key="index"
                                   :label="item.constantName"
                                   :value="item.id"
                                   :selected="false"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="subEdit('form2')">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
    import ElMain from "element-ui/packages/main/src/main";
    import {HOST} from "../../common/config";
    import ElInput from "element-ui/packages/input/src/input";

    export default {
        components: {
            ElInput,
            ElMain},
        name: "medicine-management",
        data() {
            return {
                formInline: {
                    mnemonicCode:'',
                },
                rules:{
                    mnemonicCode:[
                        {required:true,message:'请输入药品助记码',trigger:'change'}
                    ],
                },
                drugDosage:{},//保存剂型
                drugType:{},//保存药品类型
                tableData:[],
                records:[],
                curPage:1,
                formLabelWidth: '120px',//弹出框宽度
                ids:[], //存放商品编号
                editForm:{},//存放待编辑药品信息
                dialogFormVisible:false,//药品编辑弹框可见属性
                newDialogFormVisible:false,//新增药品弹框可见性
                labelPosition:'right',
                newDrug:{
                    creationDate:'',
                    drugsCode:'',
                    drugsDosageID:'',
                    drugsFormat:'',
                    drugsName:'',
                    drugsPrice:'',
                    drugsTypeID:'',
                    drugsUnit:'',
                    id:'',
                    manufacturer:'',
                    mnemonicCode:'',
                },
                loading:false,
                //验证规则
                rules2:{
                    drugsCode:[
                        {required: true, message: '必填:药品编码', trigger: 'blur'}
                    ],
                    drugsName: [{required: true, message: '必填:药品名称', trigger: 'blur'}],
                    drugsPrice:[
                        {required:true,message:"必填:药品单价", trigger: 'blur'},
                        {pattern:/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,message: '价格格式不正确',trigger: 'blur'}
                    ],

                },

            }
        },
        mounted:function(){
            this.getData()
            this.getdrugsDosage()//获取剂型
            this.getdrugType()//获取药品类型
        },
        methods: {
            //获取全部药品
            getData(){
                this.loading = true;
                let path=`${HOST}/drug/selAllDrugs/${this.curPage}`
                this.$ajax.post(path,this.formInline).then((res)=>{
                    console.log(res)
                    this.records = res.data;
                    this.tableData=res.data.list
                    this.loading = false;
                })
            },
            //获取单个药品
            getDrugInfo(id){
                let path=`${HOST}/drug/getDrug/${id}`
                this.$ajax.get(path).then((res)=>{
                    this.editForm=res.data
                    console.log(this.editForm)
                })
            },
            //获取剂型
            getdrugsDosage(){
                let path = `${HOST}/drug/conList/11`
                this.$ajax.get(path).then((res)=>{
                    this.drugDosage=res.data
                })

            },
            //新增
            showAddDialog(){
                this.newDialogFormVisible=true;
            },
            //获取药品类型
            getdrugType(){
                let path = `${HOST}/drug/conList/10`
                this.$ajax.get(path).then((res)=>{
                    this.drugType=res.data
                })
            },
            search(form1) {
                this.$refs[form1].validate((valid)=>{
                    console.log(valid)
                    if(valid){
                        this.getData()
                    }else {
                        this.message({
                            message:'查询失败',
                            type:'warning'
                        })
                    }
                })
                console.log(this.formInline);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            //切换页码
            handleCurrentChange(val) {
                console.log(val)
                this.curPage = val;
                this.getData()
            },
            //编辑索引
            setIndex(index){
                return index+(this.curPage-1)*10+1
            },
            //修改药品信息
            edit(index,row){
                this.dialogFormVisible=true;
                this.getDrugInfo(row.id)
                console.log(this.editForm)
            },
            //剂型id转换成对应名称
            dosageFormatter(row,column,val){
                let msg='';
                this.drugDosage.forEach(function(c){
                    if(c['id']==val){
                        msg = c['constantName']
                    }
                })
                return msg;
            },
            //类型id转换成对应名称
            typeFormatter(row,column,val){
                let msg='';
                this.drugType.forEach(function(c){
                    if(c['id']==val){
                        msg = c['constantName']
                    }
                })
                return msg;
            },
            //添加新药到后台
            addNewData(form){
                this.$refs[form].validate((valid)=>{
                    if(valid){
                        const h = this.$createElement;
                        this.$msgbox({
                            title: '提示',
                            message: h('p', null, [
                                h('span', null, '确定新增药物吗？ '),
                            ]),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                    instance.confirmButtonLoading = true;
                                    instance.confirmButtonText = '执行中...';
                                    setTimeout(() => {
                                        done();
                                        setTimeout(() => {
                                            instance.confirmButtonLoading = false;
                                        }, 300);
                                    }, 3000);
                                } else {
                                    done();
                                }
                            }
                        }).then(action => {
                            let path =`${HOST}/drug/addDrug`
                            this.$ajax.post(path,this.newDrug).then((res)=>{
                                if(res.data.msg=="成功"){
                                    this.$message({
                                        message:'成功添加',
                                        type:'success'
                                    })
                                }else{
                                    this.$message({
                                        message:'添加失败',
                                        type:'warning'
                                    })
                                }
                            })
                            this.newDialogFormVisible=false
                            this.newDrug={}
                            this.getData()
                        });
                    }else{
                        this.$message({
                            message:'请填写必要项目',
                            type:'warning'
                        })
                    }
                })
            },

            //远程查询
            remoteMethod(){

            },
            loading(){

            },
            //提交修改
            subEdit(form2){
                console.log(this.editForm)
                this.$refs[form2].validate((valid)=>{
                    if(valid){
                        this.$msgbox({
                            title: '提示',
                            message: '确定修改吗',
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                    instance.confirmButtonLoading = true;
                                    instance.confirmButtonText = '执行中...';
                                        setTimeout(() => {
                                            done();
                                            instance.confirmButtonLoading = false;
                                        }, 1000);
                                } else {
                                    done();
                                }
                            }
                        }).then(action => {
                            let id = this.editForm.id;
                            let path = `${HOST}/drug/updateDrug`
                            this.$ajax.post(path, this.editForm).then((res) => {
                                if (res.data.msg == "成功") {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                } else {
                                    this.$message({
                                        message: '修改失败',
                                        type: 'warning'
                                    })
                                }
                            })
                            this.dialogFormVisible = false
                            this.getData()
                            // this.getDrugInfo(id)
                            console.log(this.editForm)
                        })
                    }else{
                        this.$message({
                            message:'请填写必要项目',
                            type:'warning'
                        })
                    }
                })

            },


            //批量删除
            deleteAll(){
                if(this.multipleSelection.length===0) this.$message({
                    message:'您还没有选择药品！',
                    type:'warning'
                })
                else{
                    this.$confirm('确认删除选中的药品吗?','提示',{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(()=> {
                        let path = `${HOST}/drug/delDrugs`
                        let param = {
                            ids: []
                        }
                        this.ids = this.multipleSelection.map((item) => {
                            return item.id
                        })
                        param.ids = this.ids
                        console.log(this.ids)
                        this.$ajax.post(path, param).then((res) => {
                            if (res.data.msg == '成功') {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                })
                                this.getData()
                            } else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'warning'
                                })
                            }
                        })
                    }).catch(()=>{
                        this.$message({
                            message:'已取消删除',
                            type:'info'
                        })
                    })
                }
            },
            //单个删除
            handleDelete(index,row){
                console.log(index)
                console.log(row)
                let id = row.id
                this.$confirm('确认删除\"'+row.drugsName+'\"?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    let path=`${HOST}/drug/delDrug/${id}`
                    this.$ajax.post(path).then((res)=>{
                        console.log(res)
                        if(res.data.msg=='成功'){
                            this.$message({
                                message: '成功删除该药品！',
                                type: 'success'
                            });
                            this.getData()
                        }else{
                            this.$message({
                                message: '删除失败！',
                                type: 'warning'
                            });
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        message:'已取消删除',
                        type:'info'
                    })
                })
            }
        },
    }
</script>

<style scoped>

</style>